<template>
  <div class="dashboard-container">
    <!-- 顶部实时概况卡片 -->
    <div class="dashboard-header">
      <div class="header-top">
        <h2 class="dashboard-title">实时概况</h2>
        <div class="scrolling-text-container">
          <div class="scrolling-text" :style="scrollingStyle">
            <span
              v-for="(item, index) in scrollingText"
              :key="index"
              :class="['scrolling-item', { red: index === 0, green: index === 1 }]"
            >
              {{ item }}
            </span>
          </div>
        </div>
      </div>
      <div class="stats-cards">
        <div class="stat-card" v-for="(stat, index) in stats" :key="index" :class="`card-${index}`">
          <div class="stat-icon">
            <i :class="stat.icon"></i>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stat.value }}</div>
            <div class="stat-label">{{ stat.label }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 中间图表区域 -->
    <div class="dashboard-charts">
      <!-- 商品分析图表 -->
      <div class="chart-card">
        <div class="chart-header">
          <el-radio-group v-model="type" class="chart-radio">
            <el-radio-button label="1">今天</el-radio-button>
            <el-radio-button label="2">本周</el-radio-button>
            <el-radio-button label="3">本月</el-radio-button>
          </el-radio-group>
        </div>
        <div class="chart-container">
          <StakesA :echarts10Data="indexDayTop10"></StakesA>
        </div>
      </div>

      <!-- 往来单位分析 -->
      <div class="chart-card">
        <div class="chart-header">
          <el-radio-group v-model="typeDay" class="chart-radio">
            <el-radio-button label="1">本月</el-radio-button>
            <el-radio-button label="2">本季度</el-radio-button>
            <el-radio-button label="3">本年度</el-radio-button>
          </el-radio-group>
        </div>
        <div class="chart-container">
          <StakesB :echarts10Data="FromDwList"></StakesB>
        </div>
      </div>
      <!--人员KPI-->
      <div class="chart-card">
        <div class="chart-header">
          <el-radio-group v-model="typeKpiDay" class="chart-radio">
            <el-radio-button label="1">今天</el-radio-button>
            <el-radio-button label="2">本周</el-radio-button>
            <el-radio-button label="3">本月</el-radio-button>
          </el-radio-group>
        </div>
        <div class="chart-container">
          <personKpi :dataList="kpiList"></personKpi>
        </div>
      </div>
    </div>

    <!-- 底部预警表格 -->
    <div class="dashboard-tables">
      <!-- 效期预警 -->
      <div class="table-card">
        <div class="table-header">
          <div class="warning-badge">效期预警</div>
        </div>
        <el-table :data="alarmsExpList" style="width: 100%" height="350" class="warning-table">
          <el-table-column prop="huowname" label="库区" width="120" align="center"></el-table-column>
          <el-table-column prop="spbh" label="商品编号" width="100" align="center"></el-table-column>
          <el-table-column prop="spmch" label="商品名称" width="200" align="center"></el-table-column>
          <el-table-column prop="pihao" label="批号" width="120" align="center"></el-table-column>
          <el-table-column prop="shpgg" label="规格" width="150" align="center"></el-table-column>
          <el-table-column prop="dw" label="单位" width="60" align="center"></el-table-column>
          <el-table-column prop="sxrq" label="有效期" width="120" align="center">
            <template #default="{row}">
              <span class="expiry-date">{{ row.sxrq }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="shengccj" label="生产厂家" width="250" align="center"></el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next, sizes"
          :page-sizes="[100, 150, 200, 500]"
          :page-size="pageSize"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>

      <!-- 低库存预警 -->
      <div class="table-card">
        <div class="table-header">
          <div class="warning-badge">低库存预警</div>
        </div>
        <el-table :data="alarmsLowList" style="width: 100%" height="350" class="warning-table">
          <el-table-column prop="huowname" label="库区" width="120" align="center"></el-table-column>
          <el-table-column prop="spbh" label="商品编号" width="100" align="center"></el-table-column>
          <el-table-column prop="spmch" label="商品名称" width="200" align="center"></el-table-column>
          <el-table-column prop="pihao" label="批号" width="120" align="center"></el-table-column>
          <el-table-column prop="shpgg" label="规格" width="150" align="center"></el-table-column>
          <el-table-column prop="dw" label="单位" width="100" align="center"></el-table-column>
          <el-table-column prop="shl" label="数量" width="100" align="center">
            <template #default="{row}">
              <span class="low-stock">{{ row.shl }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="shengccj" label="生产厂家" width="250" align="center"></el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next, sizes"
          :page-sizes="[100, 150, 200, 500]"
          :page-size="pageSize1"
          :total="total1"
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1">
        </el-pagination>
      </div>
    </div>

    <!-- 页脚 -->
    <div class="dashboard-footer">
      <div class="footer-content">
        <span>系统版本号：wholesale_WMS V1.0.0</span>
        <span>系统名称：智能仓储管理系统（批发）</span>
        <span>系统供应商：西安百中电子科技有限公司</span>
      </div>
    </div>
  </div>
</template>

<script>
import StakesA from "./index/StakesA";
import StakesB from "./index/StakesB";
import personKpi from "./index/ringChartF";
import {
  getTop10,
  lowInventoryWarning,
  expWarning,
  realTime,
  queryCustomer,//往来单位
  queryUnitNum,//货位
} from "@/api/report/yxl"
import {
  wmsUserKpi, //人员KPI
} from "@/api/report/index.js";
export default {
  name: "Dashboard",
  components: {
    StakesA,
    StakesB,
    personKpi
  },
  data() {
    return {
      stats: [
        { icon: 'el-icon-box', value: 0, label: '当天入库订单(单)' },
        { icon: 'el-icon-truck', value: 0, label: '当天出库订单(单)' },
        { icon: 'el-icon-goods', value: 0, label: '当天入库已完成商品数量' },
        { icon: 'el-icon-sold-out', value: 0, label: '当天出库已完成商品数量' },
        { icon: 'el-icon-copy-document', value: 0, label: '库存中商品种类数' }
      ],
      indexDayTop10: [],
      FromDwList: [],
      alarmsLowList: [],
      alarmsExpList: [],
      type: '1',//商品前十
      typeDay: '1',//往来单位
      pageSize: 100,
      pageNum: 1,
      total: 0,
      pageSize1: 100,
      pageNum1: 1,
      total1: 0,
      kpiList:[],//人员KPI
      typeKpiDay:'1',//kpi
      sType:'1',
      stringNum:'',//货位数量
      scrollingText: [], // 滚动文本内容改为数组
      scrollPosition: 0, // 滚动位置
      scrollSpeed: 1, // 滚动速度
      scrollInterval: null, // 滚动定时器
    };
  },
  computed: {
    scrollingStyle() {
      return {
        transform: `translateX(${this.scrollPosition}px)`
      };
    }
  },
  watch: {
    type(newValue) {
      this.getDay10InHouse();
    },
    typeDay(newValue) {
      this.getDwList();
    },
    typeKpiDay(val){
      this.getPersonKpi(val);//获取人员KPI
    },
    stringNum(newVal) {
      this.updateScrollingText(newVal);
    }
  },
  created() {
    this.getDay10InHouse();
    this.getExpWarn();
    this.getLowWarn();
    this.getRealNum();
    this.getDwList();
    this.getPersonKpi();//获取人员KPI
    this.getHuoWei();//货位数量
  },
  mounted() {
    this.startScrolling();
  },
  beforeDestroy() {
    this.stopScrolling();
  },
  methods: {
    //货位数量
    getHuoWei(){
      queryUnitNum().then((res) => {
        this.stringNum = res.data;
      });
    },
    //人员KPI
    getPersonKpi(val) {
      wmsUserKpi({dataType:val}).then((res) => {
        this.kpiList = res.data;
      });
    },
    handleSizeChange(newsize) {
      this.pageNum = 1;
      this.pageSize = newsize;
      this.getExpWarn();
    },
    handleCurrentChange(newpage) {
      this.pageNum = newpage;
      this.getExpWarn();
    },
    handleSizeChange1(newsize) {
      this.pageNum1 = 1;
      this.pageSize1 = newsize;
      this.getLowWarn();
    },
    handleCurrentChange1(newpage) {
      this.pageNum1 = newpage;
      this.getLowWarn();
    },
    //有效期
    getExpWarn() {
      expWarning({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      }).then(res => {
        this.alarmsExpList = res.data.data.rows;
        this.total = res.data.data.total;
      });
    },
    //往来单位
    getDwList() {
      queryCustomer({
        type: this.typeDay,
      }).then(res => {
        this.FromDwList = res.data;
      });
    },
    //低库存
    getLowWarn() {
      lowInventoryWarning({
        pageSize: this.pageSize1,
        pageNum: this.pageNum1,
      }).then(res => {
        this.alarmsLowList = res.data.data.rows;
        this.total1 = res.data.data.total;
      });
    },
    getDay10InHouse() {
      getTop10({
        type: this.type,
      }).then(res => {
        this.indexDayTop10 = res.data;
      });
    },
    //top数据
    getRealNum() {
      realTime().then(res => {
        this.stats[0].value = res.data.inTotal;
        this.stats[1].value = res.data.outTotal;
        this.stats[2].value = res.data.inDrugTotal;
        this.stats[3].value = res.data.outDrugTotal;
        this.stats[4].value = res.data.spTotal;
      });
    },
    // 更新滚动文本
    updateScrollingText(text) {
      this.scrollingText = Array.isArray(text) ? text : [text];
      this.scrollPosition = 0;
    },

    // 开始滚动
    startScrolling() {
      this.stopScrolling();
      this.scrollInterval = setInterval(() => {
        this.scrollPosition -= this.scrollSpeed;
        const containerWidth = document.querySelector('.scrolling-text-container')?.offsetWidth || 0;
        const textWidth = this.scrollingText.join('').length * 10; // 粗略估算总宽度
        if (-this.scrollPosition > textWidth) {
          this.scrollPosition = containerWidth;
        }
      }, 30);
    },

    // 停止滚动
    stopScrolling() {
      if (this.scrollInterval) {
        clearInterval(this.scrollInterval);
        this.scrollInterval = null;
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: 100vh;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}

.scrolling-item {
  margin-right: 20px;
}
.scrolling-item.red {
  color: red;
  font-weight: 600;
}
.scrolling-item.green {
  color: green;
  font-weight: 600;
}

/* 保留你原来的样式 ↓ */
.dashboard-header {
  margin-bottom: 20px;
}
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.dashboard-title {
  font-size: 22px;
  color: #333;
  font-weight: 500;
  padding-left: 10px;
  border-left: 4px solid #409eff;
  margin-bottom: 0;
  margin-top: 0;
}
.scrolling-text-container {
  flex: 1;
  margin-left: 20px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  height: 30px;
  line-height: 30px;
  background-color: #f8f9fa;
  border-radius: 4px;
  padding: 0 10px;
}
.scrolling-text {
  position: absolute;
  white-space: nowrap;
  color: #666;
  font-size: 14px;
}
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
  }

  &.card-0 {
    border-top: 3px solid #ff6b6b;
    .stat-icon {
      background: rgba(255, 107, 107, 0.1);
      color: #ff6b6b;
    }
  }

  &.card-1 {
    border-top: 3px solid #feca57;
    .stat-icon {
      background: rgba(254, 202, 87, 0.1);
      color: #feca57;
    }
  }

  &.card-2 {
    border-top: 3px solid #1dd1a1;
    .stat-icon {
      background: rgba(29, 209, 161, 0.1);
      color: #1dd1a1;
    }
  }

  &.card-3 {
    border-top: 3px solid #5f27cd;
    .stat-icon {
      background: rgba(95, 39, 205, 0.1);
      color: #5f27cd;
    }
  }

  &.card-4 {
    border-top: 3px solid #2e86de;
    .stat-icon {
      background: rgba(46, 134, 222, 0.1);
      color: #2e86de;
    }
  }
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.dashboard-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(31%, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h3 {
    font-size: 18px;
    color: #333;
    font-weight: 500;
  }
}

.chart-radio {
  ::v-deep .el-radio-button__inner {
    padding: 8px 15px;
  }
}

.chart-container {
  height: 300px;
}

.dashboard-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.table-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;

  h3 {
    font-size: 18px;
    color: #333;
    font-weight: 500;
  }
}

.warning-badge {
  background: #ff4757;
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.warning-table {
  ::v-deep .el-table__header th {
    background-color: #f8f9fa;
    font-weight: 600;
  }

  ::v-deep .el-table__body tr:hover td {
    background-color: #f1f5f9 !important;
  }

  .expiry-date {
    color: #ff4757;
    font-weight: 500;
  }

  .low-stock {
    color: #ff7f50;
    font-weight: 500;
  }
}

.dashboard-footer {
  margin-top: 20px;
  text-align: center;
  padding: 15px 0;
  color: #666;
  font-size: 14px;

  .footer-content {
    display: flex;
    justify-content: center;
    gap: 30px;

    span {
      position: relative;

      &:not(:last-child):after {
        content: "";
        position: absolute;
        right: -15px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 12px;
        background: #ddd;
      }
    }
  }
}

@media (max-width: 1200px) {
  .dashboard-charts,
  .dashboard-tables {
    grid-template-columns: 1fr;
  }

  .stats-cards {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }

  .header-top {
    flex-direction: column;
    align-items: flex-start;

    .scrolling-text-container {
      margin-left: 0;
      margin-top: 10px;
      width: 100%;
    }
  }

  .dashboard-footer .footer-content {
    flex-direction: column;
    gap: 10px;

    span:after {
      display: none;
    }
  }
}
.el-pagination{
  margin-top: 10px;
  float: right;
}
</style>
